<template>
	<view class="i-drawers"
		:style="{height: modelValue ? '100vh' : '0',  background: 'rgba(0,0,0,0.4)', zIndex: zIndex}">
		<view class="back_body" @click="showMask"></view>
		<view class="inventory" :style="{height: modelValue ? bodyHeight : '0', borderRadius: radius}">
			<view class="inventory_body" :style="{ overflowY: 'hidden', borderRadius: radius, padding}">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, defineProps } from 'vue';

	const props = defineProps({
		bodyHeight: {
			type: String,
			default: '400rpx'
		},
		modelValue: {
			type: Boolean,
			default: false
		},
		radius: {
			type: String,
			default: '16rpx 16rpx 0rpx 0rpx'
		},
		zIndex: {
			type: Number,
			default: 100
		},
		padding: {
			type: String,
			default: '40rpx 0'
		},
		mask: {
			type: Boolean,
			default: true
		}
	})

	const emit = defineEmits(['update:modelValue', 'change'])

	const showMask = () => {
		if (props.mask) {
			emit('update:modelValue', !props.modelValue)
			emit('change', !props.modelValue)
		}
	}
</script>

<style lang="scss" scoped>
	.i-drawers {
		position: fixed;
		width: 100vw;
		bottom: 0;
		@include flexC;
		justify-content: flex-end;
		z-index: 30;

		.inventory {
			width: 100vw;
			background-color: #fff;
			transition: all 0.3s ease-out;

			.inventory_body {
				background-color: #fff;

			}
		}

		.back_body {
			width: 100%;
			background-color: rgba(0, 0, 0, 0);
			height: 100%;
		}
	}
</style>